<template>
  <div class="top">
    <div class="main">
      <div class="hero-box">
        <p class="zoumian">周免英雄（12月23日-12月29日)</p>
        <ul class="hero-list">
          <li
            v-for="(item ,index) in herolist"
            :key="item.id"
            :class="index===imglist? 'current':''"
            @mouseenter="getimg(index)"
          >
            <p>
              <img :src="item.img" alt style="width:69px; height:69px;" class="img1" />
              <img :src="item.img1" alt class="img2" />
            </p>
          </li>
        </ul>
      </div>
      <div class="login-box">
        <p class="ring"></p>
        <p class="font">欢迎来到王者荣耀！网瘾骚年</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    imglist: 0,
    herolist: []
  }),
  created () {
    this.gethero()
    setInterval(() => {
      this.getlunbo()
    }, 3000)
  },
  methods: {
    async gethero () {
      const data = await this.$axios.get('http://localhost:8080/getdata')
      var list = data.data
      this.herolist = list.slice(1, 8)
    },
    getimg (index) {
      this.imglist = index
    },
    randomColor () {
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    getlunbo () {
      var oFont = document.querySelector('.font')
      oFont.style.color = this.randomColor()
    }
  }
}
</script>
<style lang="less" scoped>
.top{
  *{margin: 0; padding: 0;}
  min-width: 1200px;
  height: 619px;
  background: url(  https://ossweb-img.qq.com/upload/webplat/info/yxzj/20191224/16570348726373.jpg) no-repeat center top;
 .main{
   width: 1200px;
   height: 619px;
   margin: 0 auto;
   position: relative;
   background:url(https://game.gtimg.cn/images/yxzj/web201605/top_banner/bg_header.png) no-repeat 0 504px;
    .hero-box{
    color: #a6afbc;
    width: 732px;
    padding: 8px 20px 0;
    color: #a6afbc;
    position: absolute;
    z-index: 100;
    bottom:0;
    .zoumian{
      position: relative;
      top: -8px;
      font-size: 14px;
      margin-top: -10px;
      font-size: 16px;
    }
    .hero-list{
      margin-top: 8px;
      position: relative;
      top: -8px;
      .current{
        width: 224px;
        p{
        width: 224px;
        height: 69px;
        float: left;
        margin-right: 10px;
        transition: 0.4s ease-in-out;
        overflow: hidden;
        .img1{
          transition: 0.4s ease-in-out;
          opacity: 0;
        }
        .img2{
          transition: 0.4s ease-in-out;
          opacity: 1;
        }
        }
      }
      li{
        width: 69px;
        overflow: hidden;
        transition:  0.4s ease-in-out;
        list-style: none;
        float: left;
        margin-right: 10px;
       p{
        width: 69px;
        height: 69px;
        position:relative;
        .img1{
          transition:  0.4s ease-in-out;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 1;
        }
        .img2{
          transition:  0.4s ease-in-out;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
       }
      }
    }
  }
  .login-box{
      width: 408px;
      padding: 12px 10px;
      position: absolute;
      left:772px;
      bottom:0;
      .ring{
        position: absolute;
        top: -96px;
        left: 10px;
        width: 106px;
        height: 120px;
        background: url(https://game.gtimg.cn/images/yxzj/web201605/main/spr.png);
        background-position: -110px -174px;
      }
      .font{
        position: absolute;
        top: -50px;
        left: 150px;
      }
    }
 }
}
</style>
